<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue2.js"></script>
    <script src="./vant@2.6.js"></script>
    <script src="./axios.js"></script>
    <link rel="stylesheet" href="./css/style.css">
</head>
<style>
    table {
        width: 100%;
    }

    tr td {
        text-align: center;
    }
</style>
<body>
    <div id="app">
        <!-- 新增按钮 -->
        <van-button type="info" @click="location.herf='./create.html'">新增</van-button>
        <!-- 表格 -->
        <table>
            <tr>
                <th>序号</th>
                <th>品牌名称</th>
                <th>企业名称</th>
                <th>排序</th>
                <th>当前状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in arr" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{ item.brandName }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.ordered }}</td>
                <td>{{ item.status }}</td>
                <td>
                    <van-button type="info" @click="location.herf='./update.html'">修改</van-button>
                    <van-button type="danger" @click="urlDelete">删除</van-button>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                arr:[]
            }
        },
        methods: {
            async getData(){
                let result = await axios.get('http://192.168.100.66:8080/selectAll')
                console.log(result);
                if(result.data.code === 1)    {
                    this.arr = result.data.data
                }
            },
           add(){
            
           },
           urlDelete(){
            alert(`删除数据`)
            this.arr.shift()
           }
        },
        mounted(){
            this.getData()
        }
    })
</script>

</html>